import '../index.scss'
import { useState } from 'react'

// 自定义hook函数 实现文字的显示和隐藏
function useToggle() {
    const [flag, setFlag] = useState(true)

    function changeToggle() {
        setFlag(!flag)

    }

    return {
        flag,
        changeToggle
    }

}




//  封装自定义 hook 函数的逻辑

// 1. 声明一个以use 开头的函数
// 2. 在函数体内封装 可复用的 逻辑
// 3. 在组件中用到的状态或者回调 return 出去
// 4. 在组件中调用自定义hook函数时，通过数组或者对象解构出来


// useState()

// if (true) {
//     useState()
// }

// useState 的使用规则
// 1. 只能在 组件中 或者其他hook函数中调用
// 2. 只能在 组件的顶层调用，不能嵌套在if，for，其他函数中

const App = () => {

    // 对象 解构
    const { flag, changeToggle } = useToggle()

    return (
        <div className="app">
            {flag && <div>hello</div>}
            <button onClick={changeToggle}>toggle</button>

        </div>
    )
}

export default App